<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			border: 0;
		}
		.all{
			width:100%;
			line-height: 10px;
		}
		.one{
			width: 500px;
			margin: 50px auto;
			cursor: pointer;
		}
		.left{
			float: left;
			padding-right: 20px;
			margin-left: 10px;
		}
		.right{
			line-height: 25px;
			font-size: 12px;
		}
		h4{
			display: inline-block;
		}
		.duo{
    	overflow: hidden;
    	text-align: left;
    	width: 258px;
    	text-overflow: ellipsis;
    	display:-webkit-box;
    	-webkit-box-orient: vertical;
    	-webkit-line-clamp: 2;
		}
		.qq{
			color: gray;
			cursor: pointer;
		}
		.duo a{
			color: red;
			cursor: pointer;
		}
		.py{
			margin-left:135px;
			color: red;
		}
		.ww{
			width: 200px;
			height: 20px;
			margin-top: 10px;
			
		}
		.ww img{
			margin-left: 3px;
			padding-right: 5px;
			float: left;
		}
		.ww p{
			line-height: 15px;
		}
		.dd{
			margin-left: 6px;
		}
		.py1{
			margin-left:128px;
			color: red;
		}
		.py2{
			margin-left:109px;
			color: red;
		}
	</style>
</head>
<body>
	<div class="all">
		<div class="one">
			<div class="left"><img src="./imags/1.png"></div>
			<div class="right">
				<h4>环太平洋</h4><span class="py">468人评论过</span>
				<div >
					<p class="duo"><span class="qq">#环太平洋##环太平洋</span><span class="qq">对景建筑物倒塌、核弹攻击城市、侵外星人入侵...</span><a>[详细]</a></p>
				</div >
				<div class="ww"><img src="./imags/4.png" > <p>欧美电影</p></div>
			</div>
		</div>
		<div class="one">
			<div class="left"><img src="./imags/2.png"></div>
			<div class="right">
				<h4>速度与激情6</h4><span class="py2">783人评论过</span>
				<div >
					<p class="duo"><span class="qq">[杰森·斯坦森确定加盟#速)#]</span><span class="qq">斯坦森饰演第六部大反派欧文·肖...</span><a>[详细]</a></p>
				</div >
				<div class="ww"><img src="./imags/4.png" > <p>热映推荐</p></div>
			</div>
		</div>
		<div class="one">
			<div class="left"><img src="./imags/3.png"></div>
			<div class="right">
				<h4 class="dd">青春派</h4><span class="py1">97人评论过</span>
				<div >
					<p class="duo"><span class="qq">《青春派》预告片“零差评"其逆增长 </span><a>[详细]</a></p>
				</div >
				<div class="ww"><img src="./imags/4.png" > <p>电影预告</p></div>
			</div>
		</div>
	</div>
</body>
</html>